<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../js/vue.js"></script>
    <script src="../js/vue-router3.js"></script>
</head>
<body>
<!--
        SPA  index.html   组件  Login.vue   Register.vue
        组件需要通过组件标签的形式在index.html中进行使用    静态
        如何根据用户访问路径不同,动态的渲染组件?  /login  -> login组件    /register  ->  register组件
        1. 路径   组件的 对应关系
        2. 组件的动态渲染
        以上两个问题 均可以通过引入vue中的路由对象进行解决  VueRouter
        步骤：
          1. 定义 (路由) 组件  login  register
          2. 定义路由
          3. 创建 router 实例，然后传 `routes` 配置
          4. 创建和挂载根实例
          5. 创建路由出口
-->
<div id="app">

    <h2>hello vue</h2>
    <!-- 路由出口 -->
    <!-- 路由匹配到的组件将渲染在这里 -->
    <router-view></router-view>

    <h2>hello vueRouter</h2>

</div>

<script>
    // 登录组件
    let Login = {
        template: `
            <div>
                <form action="#" method="post">
                    <h2>欢迎登录</h2>
                    <p>
                        <input type="text" name="username" id="username" placeholder="请输入用户名">
                    </p>
                    <p>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </p>
                    <p>
                        <input type="submit" value="立即登录">
                    </p>
                </form>
            </div>
        `
    }

    // 注册组件
    let Register = {
        template: `
            <div>
                <form action="#" method="post">
                    <h2>欢迎注册</h2>
                    <p>
                        <input type="text" name="username" id="username" placeholder="请输入用户名">
                    </p>
                    <p>
                        <input type="password" name="password" id="password" placeholder="请输入密码">
                    </p>
                    <p>
                        <input type="submit" value="立即注册">
                    </p>
                </form>
            </div>
        `
    }


    // 2.定义路由  路由列表     路径 -> 组件  关系  path: 路径  component：组件
    const routes = [
        { path: '/login', component: Login },
        { path: '/register', component: Register }
    ]

    //  3. 创建 router 实例，然后传 `routes` 配置
    const router = new VueRouter({
        routes // (缩写) 相当于 routes: routes
    })

    // 4. 创建和挂载根实例
    // 记得要通过 router 配置参数注入路由，
    // 从而让整个应用都有路由功能
    let vm = new Vue({
        el: '#app',
        router
    })
</script>
</body>
</html>